//立即执行，把初始账号和密码压入进入
// (function(){
// 	//创建识别号
// 	let uniMark = 1
// 	localStorage.setItem('uniMark',uniMark)
// 	let tmp_uin = localStorage.getItem('uniMark')
// 	++tmp_uin;
// 	console.log(tmp_uin);
// })();
//创建初始识别号
	// localStorage.setItem('uniMark',1)

const button_qr = document.querySelector('.button_qr')
const submit = document.querySelector('.submit')
button_qr.addEventListener('click',function(){
	if(button_qr.checked === true)
	{
		submit.style.backgroundColor = '#27BA9B'
		submit.disabled = false
	}
	else{
		submit.style.backgroundColor = '#CFCDCD'
		submit.disabled = true
	}
	
})

//短信验证码
const code = document.querySelector('.code')
let flag = true  // 通过一个变量来控制   节流阀 
code.addEventListener('click',function(){
	if(flag)
	{
		flag = false
		code.innerHTML = `10秒后重新获取`
		let time_ans = 10
		let tmp = setInterval(function(){
			time_ans--;
			code.innerHTML = `${time_ans}秒后重新获取`
			if(time_ans==0)
			{
				clearInterval(tmp)
				code.innerHTML = '重新获取验证码'
				flag = true
			}
		},1000)
	}
})
//验证用户名表单
const username = document.querySelector('[name=username]')

username.addEventListener('change',verifyName)
	function verifyName(){
		const span = username.nextElementSibling
		const reg = /^[a-zA-Z0-9-_]{6,10}$/
		if(!reg.test(username.value)){
			span.innerHTML = '输入不合法，请输入6~10位数字或英文'
			return false
		}
		span.innerHTML = ''
		return true
	}
	
// 3. 验证的是手机号
const phone = document.querySelector('[name=phone]')
phone.addEventListener('change', verifyPhone)
function verifyPhone() {
  const span = phone.nextElementSibling
  const reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
  if (!reg.test(phone.value)) {
	span.innerText = '输入不合法,请输入正确的11位手机号码'
	return false
  }
  span.innerText = ''
  return true
}

// 4. 验证的是验证码
const codeInput = document.querySelector('[name=code]')
codeInput.addEventListener('change', verifyCode)
function verifyCode() {
  const span = codeInput.nextElementSibling
  const reg = /^\d{6}$/
  if (!reg.test(codeInput.value)) {
	span.innerText = '输入不合法,6 位数字'
	return false
  }
  span.innerText = ''
  return true
}

// 5. 验证的是密码框
const password = document.querySelector('[name=password]')
password.addEventListener('change', verifyPwd)
function verifyPwd() {
  const span = password.nextElementSibling
  const reg = /^[a-zA-Z0-9-_]{6,20}$/
  if (!reg.test(password.value)) {
	span.innerText = '输入不合法,6~20位数字字母符号组成'
	return false
  }
  span.innerText = ''
  return true
}

// 6. 密码的再次验证
const confirm = document.querySelector('[name=confirm]')
confirm.addEventListener('change', verifyConfirm)
function verifyConfirm() {
  const span = confirm.nextElementSibling
  if ((confirm.value !== password.value)&&password.value!='') {
	span.innerText = '两次密码输入不一致'
	return false
  }
  // 6.5 合法的 就清空span
  span.innerText = ''
  return true
}

//提交
   // 8. 提交模块
let tmp1=tmp2=tmp3=tmp4=tmp5 = true
//获取元素，本地存储

//获取本地存储数据
const arr_mysql = JSON.parse(localStorage.getItem('MYSQL')) || []
console.log(arr_mysql);


const username_id = document.querySelector('[name=username]')
const user_password = document.querySelector('[name=password]')
const form = document.querySelector('form')
const iteam_id = form.querySelectorAll('[name]')
function fn(){
	
}


form.addEventListener('submit', function (e) {
	e.preventDefault()
  // 依次判断上面的每个框框 是否通过，只要有一个没有通过的就阻止
  // console.log(verifyName())
  if (!verifyName()) {
	   e.preventDefault()
	   tmp1 = false
  }		else   tmp1 = true
  if (!verifyPhone()) 	 {
	  e.preventDefault()
	  tmp2 = false
  }	else   tmp2 = true
  if (!verifyCode())  {
	  e.preventDefault()
	  tmp3 = false
  }   else   tmp3 = true
  if (!verifyPwd())  {
	  e.preventDefault()
	  tmp4 = false
  }		else   tmp4 = true
  if (!verifyConfirm()) {
	  e.preventDefault()
	  tmp5 = false
  }	else   tmp5 = true
  
  let if_flag = true;
  let result  = true;
	  //提交之前 获取本地数据，防止重复账号注册
if(tmp1 && tmp2 && tmp3 && tmp4 &&tmp5)
{
	function judge_render(my_id) {
	  for (let i = 0; i < my_id.length; i++) {
	    const { username: id_tmp } = my_id[i];
	    if ( username_id.value == id_tmp) {
	      if_flag = false;
	      return if_flag; // 找到重复用户名，立即返回 false
	    }
	  }
	  return if_flag; // 没有找到重复用户名，返回 true
	}
	  result = judge_render(arr_mysql)
}
console.log(result);
  //为表单解决    //记录本地账号和密码
  localStorage.setItem('id',username_id.value)
  localStorage.setItem('id_mima',user_password.value)
  //判断账号是否存在    //对象解构函数   //记录所有本地账号
  if(result &&(tmp1 && tmp2 && tmp3 && tmp4 &&tmp5))
  {
	  const tmp_obj = {}
	  for(let i=0;i<iteam_id.length;i++)
	  {
	  	  tmp_obj[iteam_id[i].name] = iteam_id[i].value
	  }
		//设置唯一识别id号
	  tmp_obj.id = arr_mysql.length;
	  arr_mysql.push(tmp_obj)
	  //传回本地数组对象 密码和账户
	  localStorage.setItem('MYSQL',JSON.stringify(arr_mysql))
	  	if( tmp1 && tmp2 && tmp3 && tmp4 && tmp5)
	  	{
			myAlert(true,'注册成功,2秒后自动跳转')
			setTimeout(()=>{
				location.href = './登录界面.html';
				//重置表单
				document.querySelector('.custom-checkbox').click()
				document.querySelector('.xtx-form').reset()
			},2000)
			setTimeout(()=>{
				document.querySelector('.alert').innerHTML = '注册成功,1秒后自动跳转'
			},1000)
		}
  }
  if(!result){
		myAlert(false,'当前账号已注册')
  }
})